<template>
    <fieldset>
        <legend>过渡动画</legend>
        <button @click="flag=!flag">点鸡</button>
        <transition enter-active-class="animate__animated animate__rubberBand" leave-active-class="animate__animated animate__tada">
            <div class="container" v-if="flag">
                二愣子瞪大着眼睛望着四周
            </div>
        </transition>
    </fieldset>
</template>
<script>
    //3中情况出发transition动画
    //1.v-if
    //2.v-show
    //3.动态组件的切换 is
    import "animate.css"
    export default {
        data() {
            return {
                flag: true
            }
        }
    }
</script>
<style scoped>
    .container {
        border: 1px solid #000;
        width: 200px;
        height: 100px;
        background: hotpink
    }

    /* .v-enter,
    .v-leave-to {
        opacity: 0
    }

    .v-enter-to,
    .v-leave {
        opacity: 1
    }

    .v-enter-active,
    .v-leave-active {
        transition: all 2s;
    } */
</style>